<template>
  <scroll-view 
  class="album_content"
  @scrolltolower='scrolltolower'
   scroll-y
  >
	 <!-- 轮播图 -->
  <view class="banner">
		<swiper
		class="swiper"
		indicator-dots
		interval='2000'
		autoplay
		circular
		>
		<swiper-item
		v-for="item in banner"
		:key="item.id"
		>
		<image  :src="item.thumb"></image>
		</swiper-item>
		</swiper>
  </view>
   <!-- 图文 -->
   <view class="album">
      <navigator 
	  class="album_item"
	  v-for="item in album"
	  :key="item.id"
	  :url='`/pages/album/index?id=${item.id}`'
	  >
		  <view class="album_img">
			  <image mode="aspectFill" :src="item.cover"></image>
		  </view>
		  <view class="album_info">
			  <view class="info_top">
				  {{item.name}}
			  </view>
			  <view class="info_txt">
				  {{item.desc}}
			  </view>
			  <view class="info_btn">
				  <view class="btn1"> + 关注 </view>
			  </view>
		  </view>
	  </navigator>

   </view>
  </scroll-view>
</template>

<script>
export default {
	name:'homeAlbum',
	data(){
		return {
			//轮播图数据
			banner:[],
			//图文数据
			album:[],
			data:{
				limit:30,
				order:'new',
				skip:0
			},
			//是否有数据
			isdata:true
		}
	},
  //组件加载完触发
  mounted() {
	this.getList()
    uni.setNavigationBarTitle({ title: "专辑" });
  },
  methods:{
	  getList(){
         this.request({
			url:"/api/v1/wallpaper/album",
			method:"get",
			data:this.data
		 }).then((res)=>{
			 /**判断还有没有数据 */
			 if(res.data.res.album.length === 0){
                wx.showLoading({title: '到底了亲！'})
                    setTimeout(()=>{
                       wx.hideLoading()
                    },1000)
                   this.isdata = false
                   return
			 }
			 //轮播图数据
			this.banner = res.data.res.banner
			//图文数据
			//this.album = res.data.res.album
             this.album = [...this.album,...res.data.res.album]
		 })
	  },
	  //滚动事件
	  scrolltolower(){
		 if(this.isdata){
			 //改变页数
            this.data.skip += this.data.limit
			//重新请求
		    this.getList()
		 }
	  }
  }
};
</script>

<style lang="scss" scoped>
//轮播图
    .banner{
		swiper{
			//原图片的640 * 284  宽高的比例大概是640/284 = 2.3
			height: calc(750rpx / 2.3);
		  swiper-item{
			 // height: 100%;
			  image{
				  height: 100%;
			  }
		  }
		}
	}
//图文	
.album{
 .album_item{
	 display: flex;
	 padding: 10rpx;
	 border-bottom: 1rpx solid #666;
	.album_img{
	 padding: 0 10rpx;
      flex: 1;
	  image{
		  width: 200rpx;
          height: 200rpx;
	  }
	} 
	.album_info{
		flex: 2;
		overflow: hidden;
	  .info_top{
		font-size: 30rpx;
		font-weight: bold;
		margin: 10rpx 0 10rpx 20rpx;
	  }
	  .info_txt{
		  font-size: 24rpx;
		  //字体...
		  text-overflow: ellipsis;
		  overflow: hidden;
		  white-space: nowrap;
	  }
	  .info_btn{
		  display: flex;
		  justify-content: flex-end;
		  color: $color;
		.btn1{
			padding: 10rpx 5rpx;
			border: 1rpx solid $color;
					  margin-top: 40rpx;
		}
	  }	
	}
 }	
}
.album_content{
   height:calc(100vh - 64rpx);
}
</style>
